<template>
  <div class="login-box">
    <!-- logo -->
    <div class="top-box">
      <div class="top-div">
        <img src="../../assets/image/logo.png" alt />
      </div>
      <p class="top-title">金融融资平台，全程为您服务</p>
    </div>
    <!-- 中间登陆 -->
    <div class="middle-box">
      <div class="div-bottom">
        <div class="span-info">手机号</div>
        <input type="text" placeholder="请输入手机号" v-model="user.mobile" />
      </div>
      <div class="div-bottom">
        <div class="span-info">密码</div>
        <input type="password" placeholder="请输入密码" v-model="user.password" />
      </div>
      <div class="div-bottom">
        <div class="span-info">验证码</div>
        <input type="text" placeholder="请输入验证码" v-model="user.captcha" />
        <div class="span-info2" v-if="isShowBtn" @click="codeBtn">获取验证码</div>
        <div
          class="span-info2"
          style="color:#ccc"
          v-else
        >{{ total < 10 ? '0' + total : total }}秒后重新发送</div>
      </div>
    </div>
    <!-- 下部按钮 -->
    <div class="bottom-box">
      <div>
        <button class="button1" @click="loginBtn">立即注册</button>
      </div>
    </div>
  </div>
</template>

<script>
import { logon } from "api/Login";
import { sendCode } from "api/User";
export default {
  data() {
    return {
      user: {
        mobile: "",
        password: "",
        captcha: "",
        openId: localStorage.openId,
      },
      isShowBtn: true,
      total: 60,
    };
  },
  methods: {
    loginBtn() {
      if (!/^1[3456789]\d{9}$/.test(this.user.mobile)) {
        return this.$toast("手机号码有误！");
      }

      if (!this.user.captcha) {
        return this.$toast("验证码不能为空");
      }

      if (!this.user.password) {
        return this.$toast("密码不能为空");
      }
      var reg=/^\d{6,15}$/;
 if(!reg.test(this.user.password)){
     return this.$toast("密码长度控制在6-15字符");
}
      if(localStorage.getItem('promoterId')){
        this.user.promoterId = localStorage.getItem('promoterId');
      }
      logon(this.user).then(({ code: codes, message: msg }) => {
        if (!codes) {
          this.$toast("注册成功请登录！");
          this.$router.push("/login");
        } else {
          return this.$toast(msg);
        }
      });
    },
    codeBtn() {
      if(!(/^1[3456789]\d{9}$/.test(this.user.mobile))){ 
        alert("手机号码有误，请重填");  
        return false; 
    } 
      sendCode({ phoneNum: this.user.mobile }).then(
        ({ data, code, message }) => {
          if (!code) {
            const timer = setInterval(() => {
              if (this.total <= 1) {
                this.isShowBtn = true;
                this.total = 60;
                clearInterval(timer);
                return false;
              } else {
                this.total--;
                this.isShowBtn = false;
              }
            }, 1000);
          } else {
            this.$toast(message);
          }
        }
      );
    },
  },
};
</script>

<style lang="stylus" scoped>
@import '../../assets/styl/mixin.styl'
.cursor
  cursor pointer
.login-box
  .top-box
    display flex
    flex-direction column
    justify-content center
    .top-div
      width rem(164)
      height rem(40)
      margin 0 auto
      margin-top rem(45)
      margin-bottom rem(15)
      img
        width 100%
        height 100%
    .top-title
      font-size rem(14)
      color #666666
      text-align center
  .middle-box
    margin-top rem(50)
    .span-info
      width rem(60)
      color #333
      font-size rem($ft16)
      margin-right rem(15)
    .span-info2
      color #2F54EB
    .div-bottom
      display flex
      justify-content flex-start
      border-bottom rem(1) solid #EEEEEE
      margin 0 rem(15)
      height rem(56)
      line-height rem(56)
  .bottom-box
    margin-top rem(68)
    div
      text-align center
      button
        width rem(345)
        height rem(49)
        border-radius rem(5)
        color #FFFFFF
        font-size rem($ft16)
      .button1
        background #2F54EB
      .button2
        margin-top rem(25)
        color #999999
</style>
